import React from "react";
import { ComponentMeta } from "@storybook/react";
import { Upload, UploadFile } from './Upload';
import { Button } from '../Button';
import { Icon } from "../Icon";

export default {
    title: 'Wavexk/Upload',
    component: Upload,
} as ComponentMeta<typeof Upload>;

const defaultFileList: UploadFile[] = [
    { uid: '123', size: 1234, name: 'hello.md', status: 'uploading', percent: 20 },
    { uid: '456', size: 1234, name: 'xyz.md', status: 'success', percent: 40 },
    { uid: '789', size: 1234, name: 'eyiha.md', status: 'error', percent: 55 }
]
const handleSuccess = (data:any) => {
    console.log('success: ' + JSON.stringify(data));
}
const handleError = (err:any) => {
    console.error(err);
}
const handleProgress = (percentage:any) => {
    console.log("percentage: " + percentage);
}

export const Default = (args:any) => (
    <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        data={{ key: 'value' }} headers={{ 'token': 'abc123a' }}
        accept="*.jpg" multiple={true}
        onSuccess={handleSuccess} onError={handleError}
        onProgress={handleProgress} defaultFileList={defaultFileList}

    >
        <Button btnType="primary">
            Upload File
        </Button>
    </Upload>
)

export const DragUpload = (args: any) => (
    <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        data={{ key: 'value' }} headers={{ 'token': 'abc123a' }}
        accept="*.xlsx" multiple={true}
        drag={true}
        onSuccess={handleSuccess} onError={handleError}
        onProgress={handleProgress} defaultFileList={defaultFileList}
    >
        <Icon icon="upload" size="5x" theme="secondary" />
        <br />
        <p>Drag file over to upload</p>
    </Upload>
)